<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add Examinees to Exam</title>
</head>
<body>

	<script language="javascript">
		$(function() {
	
			// add multiple select / deselect functionality
			$("#selectall").click(function() {
				if(this.checked)
					$('.case').attr('checked', this.checked).parent().addClass("checked");
				else
					$('.case').attr('checked', this.checked).parent().removeClass("checked");
			});
	
			// if all checkbox are selected, check the selectall checkbox
			// and viceversa
			$(".case").click(function() {
	
				if ($(".case").length == $(".case:checked").length) {
					$("#selectall").attr("checked", "checked").parent().addClass("checked");
				} else {
					$("#selectall").removeAttr("checked").parent().removeClass("checked");
				}
	
			});
		});
	</script>

	<c:set var="user" value="${sessionScope.user}"></c:set>
	
	<c:if test="${user.userType ne 'Professor'}" >
		<c:redirect url="LoginServlet"></c:redirect>
	</c:if>
	
	<c:set var="message" value="${param.message}"></c:set>
	<c:set var="error" value="${param.error}"></c:set>
	<c:set var="success" value="${param.success}"></c:set>
	<c:set var="examId" value="${param.exam_id}"></c:set> 

	<div id="header"><%@ include file="Header.jsp"%></div>
	<div id="content">
	<div id="navbar"><%@ include file="NavigationBar.jsp"%></div>
	
	<div id="main">
			
		<div class="box">
			<div class="box-header well">
				<h2><i class="icon-user"></i> Add Examinees to Exam Number ${examId}</h2>
				<div class="box-icon"></div>
			</div>
			<div class="box-content">
				<form action="ActivateExamServlet?exam_id=${examId }" method="post">
				<table class="table table-striped table-bordered bootstrap-datatable datatable">
					<thead>
						<tr>
							<th><label style="text-align: center;" class="checkbox"><input type="checkbox" id="selectall"/></label></th>
							<th>Examinee ID</th>
							<th>Last Name</th>
							<th>First Name</th>
						</tr>
					</thead>   
					<tbody>
						<c:forEach var="student" items="${user.getStudents()}">
							<tr>
								<td><label style="text-align: center;" class="checkbox"><input type="checkbox" class="case" name="checkStudent" value="${student.userId }"/></label></p></td>
								<td>${student.userId}</td>
								<td>${student.lastName}</td>
								<td>${student.firstName}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<p class="center">
					<br>
					<button class="btn btn-success" type="submit"><i class="icon-plus"></i> Add Examinees to Exam and Activate Exam</button>
				</p>
				</form>
			</div>
		</div>
	
	
	<c:choose>
	<c:when test="${not empty message}">
	<script>$(document).ready(function() {$.noty({ text: '${message}', type: 'information', layout: 'top'});});</script>
	</c:when>
	<c:when test="${not empty error}">
	<script>$(document).ready(function() {$.noty({ text: '${error}',type: 'error',layout: 'top'});});</script>
	</c:when>
	<c:when test="${not empty success}">
	<script>$(document).ready(function() {$.noty({text: '${success}',type: 'success',layout: 'top'});});</script>
	</c:when>
	</c:choose>
	
	</div>
	</div>
	
</body>
</html>